<template>
  <div id="example">
    <p>Original message: "{{ message }}"</p>

    <!--    此处直接使用computed中的方法名-->
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
  export default {
    name: "Computest",
    data() {
      return {
        message: 'Hello',
        computStr: ''

      }
    },
    mounted() {
      console.log('vue mounted 执行了!!')
    },
    created() {
      console.log('vue created 执行了!!')
    },
    computed: {
      // 计算属性的 getter
      reversedMessage() {
        this.computStr = this.message.split('').reverse().join('');
        // `this` 指向 vm 实例
        console.log('计算属性--计算reversedMessage = '+ this.computStr);
        return this.computStr;
      }
    },
    methods: {
      updateMessage() {
        this.message += "!";
      }
    },
    watch: {
      computStr(newVal, oldVal) {
        console.log('watch reversedMessage  new值:' + newVal);
        console.log('watch reversedMessage  old值:' + oldVal);
      }
    },


  }
</script>

<style scoped>

</style>
